﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UpImage</title>
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
    </environment>
    <link href="/lib/Cropper/cropper.css" rel="stylesheet" />
    <script src="/lib/Cropper/cropper.js"></script>
    <script src="~/lib/vue/vue.min.js"></script>
</head>
<body>
    <div class="container-fluid" id="uploadImage">
        <div class="row">
            <div class="col-8 pl-2 pt-2">
                <div style="max-width:100%;max-height:375px;">
                    <img src="~/css/media/images/Cut_bg.jpg" id="cutImage" style="max-width:100%" />
                </div>
            </div>
            <div class="col-4 mt-2">
                <div class="row flex-grow-1" style="height:100%">
                    <div class="col-12" style="height:130px;">
                        <div class="img-preview" style="width:100px;height:100px; overflow: hidden;">
                        </div>
                    </div>
                    <div class="col-12 align-self-end pl-0" style="overflow:hidden;">
                        <input type="file" id="file1" class="" style="width:90%" accept="image/jpg, image/png,image/jpeg,image/gif" />
                        <button type="button" id="btn_upImage" class="btn btn-sm btn-success m-1 ">上传原图</button>
                        <button type="button" id="btn_upCut" class="btn btn-sm btn-success m-1 ">上传剪切区域</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h6>
                    <span v-if="sourceImageSize!=''">原图大小：{{sourceImageSize}}　</span>原图宽：{{sourceImageWidth}}　原图高：{{sourceImageHeight}}<br />
                    <span v-if="upImageSize!=''">上传大小：{{upImageSize}}　上传宽：{{upImageWidth}}　上传高：{{upImageHeight}}</span>
                </h6>
            </div>
        </div>
        <div class="row fixed-bottom p-3">
                <div class="col-12 btn-group pl-5" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-sm btn-success" value="2.35/1">2.35:1</button>
                    <button type="button" class="btn btn-sm btn-success" value="16/9">16:9</button>
                    <button type="button" class="btn btn-sm btn-success" value="4/3">4:3</button>
                    <button type="button" class="btn btn-sm btn-success" value="2/1">2:1</button>
                    <button type="button" class="btn btn-sm btn-success" value="1/1">1:1</button>
                    <button type="button" class="btn btn-sm btn-success" value="1/2">1:2</button>
                    <button type="button" class="btn btn-sm btn-success" value="3/4">3:4</button>
                    <button type="button" class="btn btn-sm btn-success" value="9/16">9:16</button>
                    <button type="button" class="btn btn-sm btn-success" value="0">自由</button>
                    <button type="button" class="btn btn-sm btn-info" id="btn_setCut">设置剪裁</button>
                    <button type="button" class="btn btn-sm btn-info" id="btn_showInfo">显示剪裁区上传时信息</button>
                </div>
                <div class="col-12">
                    <label class="col-2 m-0 col-form-label-sm">宽度:</label>
                    <label class="col-2 m-0 col-form-label-sm">高度:</label>
                    <label class="col-2 m-0 col-form-label-sm">左:</label>
                    <label class="col-2 m-0 col-form-label-sm">上:</label>
                    <label class="col-2 m-0 col-form-label-sm">旋转:</label>
                </div>
                <div class="col-12 justify-content-around">
                    <input type="text" class="col-2 form-control-sm" id="txt_width" v-model="cutWidth" />
                    <input type="text" class="col-2 form-control-sm" id="txt_height" v-model="cutHeight" />
                    <input type="text" class="col-2 form-control-sm" id="txt_left" v-model="cutLeft" />
                    <input type="text" class="col-2 form-control-sm" id="txt_top" v-model="cutTop" />
                    <input type="text" class="col-2 form-control-sm" id="txt_rotate" v-model="cutRotate" />
                </div>

        </div>
        
    </div>
    
    



    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script>
        var vm = new Vue({
            el: '#uploadImage',
            data: {
                sourceImageSize: "",
                sourceImageWidth: 0,
                sourceImageHeight: 0,
                cutWidth: 0,
                cutHeight: 0,
                cutLeft: 0,
                cutTop: 0,
                cutRotate: 0,
                upImageSize: "",
                upImageWidth: 0,
                upImageHeight:0
            }
        })
        var loadImageFlag = false;
        const cutImage = document.getElementById('cutImage');
        const cropper = new Cropper(cutImage, {
            aspectRatio: 4 / 3,
            preview: '.img-preview',//预览框
            crop(event) {//剪切框改变事件，显示剪切框宽、高、x、y、图像旋转角度等数据
                vm.cutWidth=event.detail.width.toFixed(2);
                vm.cutHeight = event.detail.height.toFixed(2);
                vm.cutLeft = event.detail.x.toFixed(2);
                vm.cutTop = event.detail.y.toFixed(2);
                vm.cutRotate = event.detail.rotate;
            },
            ready() {//每次剪切区更新
                vm.sourceImageWidth = cropper.getImageData().naturalWidth;
                vm.sourceImageHeight = cropper.getImageData().naturalHeight;
            }
        });
        function getSizeInfo(size) {//显示MB或KB
            if (size < 1024 * 1024)
                return (size / 1024).toFixed(2) + "KB";
            else
                return (size / 1024 / 1024).toFixed(2) + "MB";
        } 
        $("#file1").change(function () {
            if (this.files.length > 0) {
                var file = this.files[0];
                $(this).attr('filename', file.name);
                vm.sourceImageSize = getSizeInfo(file.size);
                vm.upImageSize = "";
                reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    cropper.replace(e.target.result);//加载图像
                    loadImageFlag = true;
                }
            }
        })
        $("button").click(function () {//设置剪切框比例
            cropper.setAspectRatio(eval($(this).val()));
        });
        $("#btn_showInfo").click(function () {
            var cas = cropper.getCroppedCanvas({ maxWidth: 1920 });//获取canvas对象
            vm.upImageHeight = cas.height;
            vm.upImageWidth = cas.width
            cas.toBlob(function (e) {
                vm.upImageSize = getSizeInfo(e.size);
            },"image/jpeg", 0.9);
        });
        $("#btn_upImage").click(function () {
            var files = document.getElementById("file1").files;
            if (loadImageFlag) {
                var imgFile = new FormData();
                imgFile.append('imgFile', files[0], $("#file1").attr('filename'));
                $.ajax({
                    url: '/Manage/Home/UpLoadFile?dir=image',
                    method: 'POST',
                    data: imgFile,
                    contentType: false,
                    processData: false,
                    cache: false,
                    success: function (re) {
                        console.log(re);
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.LayerReturn.run(re.url);//执行父页面LayerReturn.run方法
                    },
                    error: function (ex) {
                        //error process....
                    }
                });
            } else
                alert('未选择任何图片！');
        });
        $("#btn_upCut").click(function () {
            if (loadImageFlag) {
                var cas = cropper.getCroppedCanvas({ maxWidth: 1920 });//获取canvas对象
                cas.toBlob(function (e) {
                    var imgFile = new FormData();
                    imgFile.append('imgFile', e, $("#file1").attr('filename'))
                    $.ajax({
                        url: '/Manage/Home/UpLoadFile?dir=image',
                        method: 'POST',
                        data: imgFile,
                        contentType: false,
                        processData: false,
                        cache: false,
                        success: function (re) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.LayerReturn.run(re.url);//执行父页面LayerReturn.run方法
                        },
                        error: function (ex) {
                            //error process....
                        }
                    });
                }, "image/jpeg", 0.9)
            } else
                alert('未选择任何图片！');
        });
        $("#btn_setCut").click(function () {
            var _width = parseFloat($("#txt_width").val());
            var _height = parseFloat($("#txt_height").val());
            var _rotate = parseInt($("#txt_rotate").val());
            var _y = parseFloat($("#txt_top").val());
            var _x = parseFloat($("#txt_left").val());
            cropper.setAspectRatio(0);
            cropper.setData({ width: _width, height: _height, rotate: _rotate, y: _y, x: _x});
        });

    </script>
</body>
</html>
